<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jun
 * @Date: 2021-05-24 14:21:51
 * @LastEditors: Jun
 * @LastEditTime: 2021-06-02 15:13:56
-->
<template>
  <div class="home page">
    <!-- 导航条 -->
    <nav-bar></nav-bar>

    <div class="container">
      <!-- 表格 -->
      <my-table class="table" :tableData="tableData" :propArray="propArray">
        <template v-slot="{ data }">
          <el-dropdown>
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="toDetails(data)">查看详细</el-dropdown-item>
              <el-dropdown-item @click.native="toSignUp(data)">报名</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </my-table>

      <!-- 分页 -->
      <pagination :total="total" v-model="currentPage"></pagination>
    </div>
  </div>
</template>

<script>
import { listUrl } from "api/examList.js";
import {getExamineeUrl} from "api/userInfo.js"

import { createNamespacedHelpers } from 'vuex'
const { mapState,mapMutations } = createNamespacedHelpers('userInfo')

export default {
  data() {
    return {
      tableData: [],
      propArray: [
        {
          //表单标题
          label: "考试时间",
          prop: "emtm",
        },
        {
          label: "主办单位",
          prop: "ogze",
        },
        {
          label: "考试名称",
          prop: "name",
        },
        {
          label: "考试期数",
          prop: "podl",
        },
        {
          label: "证书名称",
          prop: "ccnm",
        },
        {
          label: "考试费",
          prop: "cost",
        },
        {
          label: "报名开始",
          prop: "star",
        },
        {
          label: "报名截止",
          prop: "ddle",
        },
        {
          label: "准考证时间",
          prop: "attm",
        },
        {
          label: "报名上限",
          prop: "tplt",
        },
        {
          label: "成绩时间",
          prop: "gdtm",
        },
      ],
      currentPage: 1,//当前页
      total: 0,//总条数
    };
  },
  computed:{
    ...mapState(["userInfo"])
  },
  methods: {
    ...mapMutations(["updateUserInfo"]),
    API_examList(currentPage) {
      return this.$httpRequest({
        url: listUrl,
        method: "POST",
        data: {
          page: {
            size: 10,
            current: currentPage,
          },
        },
      });
    },
    API_getUserInfo(){//获取用户信息
      return this.$httpRequest({
        url:getExamineeUrl,
        method:"POST",
      })
    },
    toDetails(data) {//去详情页
      this.$router.push({path:'/examDetails',query:{id:data.id}})
    },
    toSignUp(data) {//去报名页
      if(this.userInfo.idcard){//有身份证号去报名页
        this.$router.push({path:'/signUp',query:{eid:data.id,data:encodeURIComponent(JSON.stringify(data))}})
      }else{//没有身份证号去用户信息页补充
        this.$message.error('请填写用户信息');
        this.$router.push({path:'/user'})
      }
      
    },
  },
  watch: {
    currentPage: {
      async handler(currentPage) {
        let res = await this.API_examList(currentPage);
        let { records, total } = res.data.data;
        this.tableData = records;
        this.total = total;
      },
      immediate: true,
    },
  },
  async created(){
    let userInfoRes = await this.API_getUserInfo()//获取用户信息
    this.updateUserInfo(userInfoRes.data.data)//存储用户信息
  }
};
</script>

<style>
</style>